<template>
  <div class="gradient">
    <div class="wrapper-content">
      <div class="gradient-content parallax-1">
        <h1 class="gradient-t1">文字垂直渐变</h1>
        <h1 class="gradient-t2">文字水平渐变</h1>
      </div>
      <div class="gradient-content parallax-2">
        <ul>
          <li :class="`gradient--${i-1}`" v-for="i in 15" :key="i">
            <div class="gradient"></div>
            <div class="start-color"></div>
            <div class="end-color"></div>
          </li>
        </ul>
      </div>
      <div class="gradient-content parallax-3">
        <div class="sky-gradient" :class="`sky-gradient-${String(i-1).padStart(2, '0')}`" v-for="i in 25" :key="i"></div>
      </div>
      <div class="gradient-content parallax-4">
        <div class="headshot" :class="`headshot-${i}`" v-for="i in 3" :key="i"></div>
      </div>
      <div class="gradient-content parallax-5">
        <div class="shape-outer pentagon">
          <div class="shape-inner pentagon"></div>
        </div>

        <div class="shape-outer hexagon">
          <div class="shape-inner hexagon"></div>
        </div>

        <div class="shape-outer heptagon">
          <div class="shape-inner heptagon"></div>
        </div>

        <div class="shape-outer octagon">
          <div class="shape-inner octagon"></div>
        </div>

        <div class="shape-outer nonagon">
          <div class="shape-inner nonagon"></div>
        </div>

        <div class="shape-outer decagon">
          <div class="shape-inner decagon"></div>
        </div>

        <div class="shape-outer circle">
          <div class="shape-inner circle"></div>
        </div>

        <div class="shape-outer ellipse">
          <div class="shape-inner ellipse"></div>
        </div>

        <div class="shape-outer triangle">
          <div class="shape-inner triangle"></div>
        </div>

        <div class="shape-outer rhombus">
          <div class="shape-inner rhombus"></div>
        </div>

        <div class="shape-outer trapezoid">
          <div class="shape-inner trapezoid"></div>
        </div>

        <div class="shape-outer parallelogram">
          <div class="shape-inner parallelogram"></div>
        </div>

        <div class="shape-outer bevel">
          <div class="shape-inner bevel"></div>
        </div>

        <div class="shape-outer rabbet">
          <div class="shape-inner rabbet"></div>
        </div>

        <div class="shape-outer sign-left">
          <div class="shape-inner sign-left"></div>
        </div>

        <div class="shape-outer sign-right">
          <div class="shape-inner sign-right"></div>
        </div>

        <div class="shape-outer chevron-left">
          <div class="shape-inner chevron-left"></div>
        </div>

        <div class="shape-outer chevron-right">
          <div class="shape-inner chevron-right"></div>
        </div>
      </div>
      <div class="gradient-content parallax-6">
        <div class="border-headshot"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const images: any = reactive({
  dr_mono: new URL(`../../../assets/images/3dr_mono.png`, import.meta.url).href,
  dr_chihiro: new URL(`../../../assets/images/3dr_chihiro.png`, import.meta.url).href,
  dr_howlcastle: new URL(`../../../assets/images/3dr_howlcastle.png`, import.meta.url).href,
});

nextTick(()=>{
})
</script>

<style lang="scss" scoped>
@import url(../index.scss);
.gradient {
  .gradient-content{
    min-height: 50%;
    background: #C44D58;
    background-color: #212121;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    margin: var(--rem-20);
    gap: var(--rem-30);
    &.parallax-1{
      h1{
        font-size: var(--rem-50);
        font-weight: 600;
        -moz-background-clip: text;
        -webkit-background-clip: text;
        -o-background-clip: test;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        &.gradient-t1{
          background-image: linear-gradient(180deg,#3ff9ff 0%,#409eff 72%,#78BEFF 100%);
        }
        &.gradient-t2{
          background-image: linear-gradient(90deg,#3ff9ff 0%,#409eff 100%);
        }
      }
    }
    &.parallax-2{
      .gradient--0 {
        --gradient-start: #6DE195;
        --gradient-start-text: '#6DE195';
        --gradient-end: #C4E759;
        --gradient-end-text: '#C4E759';
      }

      .gradient--1 {
        --gradient-start: #41C7AF;
        --gradient-start-text: '#41C7AF';
        --gradient-end: #54E38E;
        --gradient-end-text: '#54E38E';
      }

      .gradient--2 {
        --gradient-start: #99E5A2;
        --gradient-start-text: '#99E5A2';
        --gradient-end: #D4FC78;
        --gradient-end-text: '#D4FC78';
      }

      .gradient--3 {
        --gradient-start: #ABC7FF;
        --gradient-start-text: '#ABC7FF';
        --gradient-end: #C1E3FF;
        --gradient-end-text: '#C1E3FF';
      }

      .gradient--4 {
        --gradient-start: #6CACFF;
        --gradient-start-text: '#6CACFF';
        --gradient-end: #8DEBFF;
        --gradient-end-text: '#8DEBFF';
      }

      .gradient--5 {
        --gradient-start: #5583EE;
        --gradient-start-text: '#5583EE';
        --gradient-end: #41D8DD;
        --gradient-end-text: '#41D8DD';
      }

      .gradient--6 {
        --gradient-start: #A16BFE;
        --gradient-start-text: '#A16BFE';
        --gradient-end: #DEB0DF;
        --gradient-end-text: '#DEB0DF';
      }

      .gradient--7 {
        --gradient-start: #D279EE;
        --gradient-start-text: '#D279EE';
        --gradient-end: #F8C390;
        --gradient-end-text: '#F8C390';
      }

      .gradient--8 {
        --gradient-start: #F78FAD;
        --gradient-start-text: '#F78FAD';
        --gradient-end: #FDEB82;
        --gradient-end-text: '#FDEB82';
      }

      .gradient--9 {
        --gradient-start: #BC3D2F;
        --gradient-start-text: '#BC3D2F';
        --gradient-end: #A16BFE;
        --gradient-end-text: '#A16BFE';
      }

      .gradient--10 {
        --gradient-start: #A43AB2;
        --gradient-start-text: '#A43AB2';
        --gradient-end: #E13680;
        --gradient-end-text: '#E13680';
      }

      .gradient--11 {
        --gradient-start: #9D2E7D;
        --gradient-start-text: '#9D2E7D';
        --gradient-end: #E16E93;
        --gradient-end-text: '#E16E93';
      }

      .gradient--12 {
        --gradient-start: #F5CCF6;
        --gradient-start-text: '#F5CCF6';
        --gradient-end: #F1EEF9;
        --gradient-end-text: '#F1EEF9';
      }

      .gradient--13 {
        --gradient-start: #F0EFF0;
        --gradient-start-text: '#F0EFF0';
        --gradient-end: #FAF8F9;
        --gradient-end-text: '#FAF8F9';
      }

      .gradient--14 {
        --gradient-start: #121317;
        --gradient-start-text: '#121317';
        --gradient-end: #323B42;
        --gradient-end-text: '#323B42';
      }

      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: var(--rem-20);
      }

      li {
        width: 20%;
        color: #F0EFF0;
        position: relative;
        text-align: center;
      }

      .gradient {
        display: inline-block;
        height: 250px;
        width: 80%;
        background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));
        border-radius: 20px;
        box-shadow: 0 5px 10px #0002;
      }

      .start-color, .end-color {
        padding: 10px 0 0 10px;
      }

      .start-color:before, .end-color:before {
          content: '';
          width: 15px;
          height: 15px;
          border-radius: 999px;
          display: inline-block;
        }

      .start-color:after, .end-color:after {
          padding: 0 10px;
          vertical-align: 2px;
          border-radius: 999px;
          display: inline-block;
        }

      .end-color:before { background-color: var(--gradient-start); }

      .end-color:after { content: var(--gradient-start-text); }

      .start-color:before { background-color: var(--gradient-end); }

      .start-color:after { content: var(--gradient-end-text); }

      @media screen and (min-width: 1750px) { :root { --columns: 8; } }
      @media screen and (max-width: 1750px) { :root { --columns: 7; } }
      @media screen and (max-width: 1500px) { :root { --columns: 6; } }
      @media screen and (max-width: 1250px) { :root { --columns: 5; } }
      @media screen and (max-width: 1000px) { :root { --columns: 4; } }
      @media screen and (max-width: 750px) { :root { --columns: 6; } }
      @media screen and (max-width: 625px) { :root { --columns: 5; } }
      @media screen and (max-width: 500px) { :root { --columns: 4; } }
      @media screen and (max-width: 375px) { :root { --columns: 3; } }
      @media screen and (max-width: 250px) { :root { --columns: 2; } }

      @media screen and (max-width: 750px) {
        ul {
          margin-top: 15px;
          grid-auto-rows: 190px;
          font-size: 10px;
        }
        .gradient {
          height: 125px;
        }
        .start-color, .end-color {
          padding: 7px 0 0 10px;
        }
      }
    }
    &.parallax-3{
      display: flex;
      gap: 0;
      position: relative;
      height: var(--rem-500);
      .sky-gradient {
        width: 4%;
        height: var(--rem-150);
        cursor: pointer;
        transition: box-shadow 150ms, z-index 0ms;
      }

      .sky-gradient:hover {
        z-index: 2;
        box-shadow: 0 -5px 10px black;
      }

      .sky-gradient::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: var(--rem-150);
        height: var(--rem-350);
        background: inherit;
        transform: translateZ(0);
        opacity: 0;
        transition: opacity 0s 1s;
      }

      .sky-gradient:hover::after {
        opacity: 1;
        transition: opacity 1s 0s;
      }

      // .sky-gradient:nth-child(1)::after {
      //   left: 0%;
      // }

      // .sky-gradient:nth-child(2)::after {
      //   left: -100%;
      // }

      // .sky-gradient:nth-child(3)::after {
      //   left: -200%;
      // }

      // .sky-gradient:nth-child(4)::after {
      //   left: -300%;
      // }

      // .sky-gradient:nth-child(5)::after {
      //   left: -400%;
      // }

      // .sky-gradient:nth-child(6)::after {
      //   left: -500%;
      // }

      // .sky-gradient:nth-child(7)::after {
      //   left: -600%;
      // }

      // .sky-gradient:nth-child(8)::after {
      //   left: -700%;
      // }

      // .sky-gradient:nth-child(9)::after {
      //   left: -800%;
      // }

      // .sky-gradient:nth-child(10)::after {
      //   left: -900%;
      // }

      // .sky-gradient:nth-child(11)::after {
      //   left: -1000%;
      // }

      // .sky-gradient:nth-child(12)::after {
      //   left: -1100%;
      // }

      // .sky-gradient:nth-child(13)::after {
      //   left: -1200%;
      // }

      // .sky-gradient:nth-child(14)::after {
      //   left: -1300%;
      // }

      // .sky-gradient:nth-child(15)::after {
      //   left: -1400%;
      // }

      // .sky-gradient:nth-child(16)::after {
      //   left: -1500%;
      // }

      // .sky-gradient:nth-child(17)::after {
      //   left: -1600%;
      // }

      // .sky-gradient:nth-child(18)::after {
      //   left: -1700%;
      // }

      // .sky-gradient:nth-child(19)::after {
      //   left: -1800%;
      // }

      // .sky-gradient:nth-child(20)::after {
      //   left: -1900%;
      // }

      // .sky-gradient:nth-child(21)::after {
      //   left: -2000%;
      // }

      // .sky-gradient:nth-child(22)::after {
      //   left: -2100%;
      // }

      // .sky-gradient:nth-child(23)::after {
      //   left: -2200%;
      // }

      // .sky-gradient:nth-child(24)::after {
      //   left: -2300%;
      // }

      // .sky-gradient:nth-child(25)::after {
      //   left: -2400%;
      // }

      /* Gradients */
      .sky-gradient-00, .sky-gradient-24 {
        background: #00000c;
      }

      .sky-gradient-01 {
        background: linear-gradient(to bottom, #020111 85%, #191621 100%);
      }

      .sky-gradient-02 {
        background: linear-gradient(to bottom, #020111 60%, #20202c 100%);
      }

      .sky-gradient-03 {
        background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
      }

      .sky-gradient-04 {
        background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
      }

      .sky-gradient-05 {
        background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
      }

      .sky-gradient-06 {
        background: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
      }

      .sky-gradient-07 {
        background: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%);
      }

      .sky-gradient-08 {
        background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%);
      }

      .sky-gradient-09 {
        background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
      }

      .sky-gradient-10 {
        background: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
      }

      .sky-gradient-11 {
        background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%);
      }

      .sky-gradient-12 {
        background: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%);
      }

      .sky-gradient-13 {
        background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);
      }

      .sky-gradient-14 {
        background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
      }

      .sky-gradient-15 {
        background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
      }

      .sky-gradient-16 {
        background: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
      }

      .sky-gradient-17 {
        background: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
      }

      .sky-gradient-18 {
        background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
      }

      .sky-gradient-19 {
        background: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
      }

      .sky-gradient-20 {
        background: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
      }

      .sky-gradient-21 {
        background: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%);
      }

      .sky-gradient-22 {
        background: linear-gradient(to bottom, #090401 50%, #4B1D06 100%);
      }

      .sky-gradient-23 {
        background: linear-gradient(to bottom, #00000c 80%, #150800 100%);
      }
    }
    &.parallax-4{
      .headshot {
        flex-shrink: 0;
          margin: 20px;
          height: calc(150px + 6vw);
          width: calc(150px + 6vw);
          border: calc(8px + 0.2vw) solid transparent;
          background-origin: border-box;
          background-clip: content-box, border-box;
        background-size: cover;
        box-sizing: border-box;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
      }

      .headshot-1 {
        border-radius: 30%;
        background-image: url(),
        linear-gradient(to top, #0fd850, #f9f047);
      }

      .headshot-2 {
        border-radius: 50%;
        background-image: url(),
        linear-gradient(to bottom right, #FF3CAC, #562B7C, #2B86C5);
      }

      .headshot-3 {
        border-radius: 50% 10%;
        background-image: url(),
        linear-gradient(to bottom left, #f83600, #f9d423);
      }
    }
    &.parallax-5{
      display: flex;
      gap: 0;
      flex-wrap: wrap;
      .shape-outer {
        display: flex;
        flex-shrink: 0;
        height: calc(150px + 4vw);
        width: calc(150px + 4vw);
        margin: var(--rem-20);
        background-image: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
      }

      .shape-inner {
        height: calc(130px + 4vw);
        width: calc(130px + 4vw);
        background: url()  no-repeat center;
        background-size: cover;
        margin: auto;
      }

      .pentagon {
        -webkit-clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
        clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
      }

      .hexagon {
        -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      }

      .heptagon {
        -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
        clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
      }

      .octagon {
        -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      }

      .nonagon {
        -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
        clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
      }

      .decagon {
        -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
        clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
      }

      .circle {
        -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
      }

      .ellipse{
        -webkit-clip-path: ellipse(35% 50% at 50% 50%);
        clip-path: ellipse(35% 50% at 50% 50%);
      }

      .triangle{
        -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }

      .rhombus {
        -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }

      .trapezoid {
        -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
      }

      .parallelogram {
        -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      }

      .bevel {
        -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
      }

      .rabbet {
        -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
        clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
      }

      .sign-left {
        -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
        clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
      }

      .sign-right {
        -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
      }

      .chevron-left {
        -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
        clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
      }

      .chevron-right {
        -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
      }

    }
    &.parallax-6{
      .border-headshot{
        width: var(--rem-400);
        height: var(--rem-400);
        background: #5753C9;
        background-image: linear-gradient(-225deg,#3D4E81 0%,#5753C9 48%,#6E7FF3 100%);
        background: linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
        background-size: 600% 600%;
        transition: border-radius 3s linear;
        border-radius: 60% 40% 59% 41%/55% 36% 64% 45%;
        animation: borderAnimation 5s infinite;
      }
      @keyframes borderAnimation
      {
        0%{
          border-radius: 60% 40% 59% 41%/55% 36% 64% 45%;
          background-position: 0% 50%;
        }
        25%{
          border-radius: 40% 60% 37% 63%/42% 56% 44% 58%;
        }
        50%{
          border-radius: 50% 50% 39% 61%/61% 69% 31% 39%;
          background-position: 100% 50%;
        }
        75%{
          border-radius: 59% 41% 68% 32%/48% 52% 48% 62%;
        }
        100%{
          background-position: 0% 50%;
        }
      }
    }
  }
}

</style>
